<template>
  <div class="flex-column">
    <div @click="selectChange(index)" class="item" v-for="(item,index) in opts" :key="index">
      <o-icon :icon="checkedIndex==index?'icon-btn_selectd select-label-selected':'icon-unselected'"></o-icon>
      <span class="select-label">{{item.name||item.value}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        opts: [],
        checkedIndex: 0,
      }
    },
    props: {
      items: { /** {name:1,value:a,checked} */
        type: Array,
        default: function(){
          return []
        }
      },
      value: {
        type: String,
        default: ''
      }
    },
    mounted() {
      this.items.forEach((element,index) => {
        console.log(this.value);
        if(this.value == element.value) {
          this.checkedIndex = index
        }
      })
      this.opts = JSON.parse(JSON.stringify(this.items))
    },
    methods: {
      selectChange(index) {
        if (this.checkedIndex==index) return
        this.checkedIndex = index
        this.$emit('change', this.items[index].value)
      }
    },
  }
</script>

<style>
.select-label {
  font-size: 14px;
  margin-left: 10px;
  margin-right: 20px;
  color: #222;
}
.select-label-selected {
  color: rgb(45,134,240);
}
</style>